<template>
  <view class="components-form">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>创建货物</tn-nav-bar>
    
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <dynamic-demo-template ref="demoTemplate" :full="true" :fullWindowsScroll="true" @click="click">
        <tn-form :model="model" ref="form" errorType="message" labelPosition="top" labelWidth="140" labelAlign="left">
          <tn-form-item label="货物编号" labelPosition="top" labelAlign="left">
            <tn-input disabled v-model="model.pnum" type="text" placeholder="保存后自动生成" :border="false"></tn-input>
          </tn-form-item>
		  <tn-form-item label="货物名称" prop="pname" :required="true" labelPosition="top" labelAlign="left">
            <tn-input v-model="model.pname" type="text" placeholder="请输入货物名称" :border="false"></tn-input>
          </tn-form-item>
          <tn-form-item label="所在地区" prop="address" :required="true"  labelPosition="top" labelAlign="left">
            <tn-input v-model="model.address" type="select" placeholder="请选择所在地区" :border="false" :selectOpen="pickerShow" @click="pickerShow = true"></tn-input>
          </tn-form-item>
		  <tn-form-item label="详细地址" prop="addressDetail" :required="true"  labelPosition="top" labelAlign="left">
		    <tn-input v-model="model.addressDetail" type="textarea" placeholder="请输入地址" :border="false" inputAlign="left"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="单位" prop="unit"  :required="true" labelPosition="top" labelAlign="left">
		    <tn-input v-model="model.unit" type="text" placeholder="请选择货物单位" :border="false" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="数量" prop="nums" :required="true"  labelPosition="top" labelAlign="left">
		    <tn-input v-model="model.nums" type="number" placeholder="请输入数量" :border="false"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="货物介绍" prop="desc" labelPosition="top" labelAlign="left">
		    <tn-input v-model="model.desc" type="textarea" placeholder="请输入介绍" :border="false" inputAlign="left"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="上传发票" prop="images1List" :required="true" labelPosition="top" labelAlign="left">
		    <tn-image-upload 
			ref="imageUpload1"
			:fileList="model.images1List" 
			maxCount="1"
			@on-success="uploadSuccess1"
			@on-error="uploadError1"
			@on-list-change="imageUploadChange1">
			</tn-image-upload>
		  </tn-form-item>
          <tn-form-item label="货物图片" prop="images2List" :required="true" labelPosition="top" labelAlign="left">
            <tn-image-upload 
			ref="imageUpload2"
			:fileList="model.images2List"
			maxCount="6"
			@on-success="uploadSuccess2"
			@on-error="uploadError2"
			@on-list-change="imageUploadChange2">
			</tn-image-upload>
          </tn-form-item>

        </tn-form>
        <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
      </dynamic-demo-template>
      
      <!-- 地区picker -->
      <tn-picker
        v-model="pickerShow"
        mode="region"
        @confirm="regionPickerConfirm"
      ></tn-picker>
      <!-- 商品单位select -->
      <tn-select
        v-model="selectShow"
        mode="single"
        :list="selectList"
        @confirm="unitSelectConfirm"
      ></tn-select>
      
    </view>
    
  </view>
</template>

<script>
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  import config from '@/api/config'; 
  import {addGoods} from '@/api/goods.js'
  import  store from '@/store'
  export default {
    name: 'componentsForm',
    components: {dynamicDemoTemplate},
    data() {
      return {
        pickerShow: false,
        selectShow: false,
        selectList: [
          {
            label: '吨',
            value: 1101
          },
          {
            label: '立方米',
            value: 1102
          },
		  {
		    label: '升',
		    value: 1102
		  }
        ],
        model: {
		  id:null,
          pnum: '',
          pname: '',
          address: '',
		  addressDetail:'',
		  nums:'',
		  unit:'',
          desc: '',
		  images1:'',
		  images2:'',
		  images3:'',
		  images4:'',
		  images5:'',
		  images6:'',
		  images7:'',
          images1List: [],
		  images2List: [],
        },
        rules: {
          pname: [
            {
              required: true,
              message: '请输入货物名称',
              trigger: 'blur'
            },
            {
            	min: 3,
            	max: 50,
            	message: '姓名长度在3到50个字符',
            	trigger: ['change','blur'],
            },
          ],
          address: [
          	{
          		required: true,
          		message: '请选择地区',
          		trigger: ['change','blur'],
          	}
          ],
		  addressDetail: [
		  	{
		  		required: true,
		  		message: '请输入具体位置',
		  		trigger: ['change','blur'],
		  	}
		  ],
          nums: [
          	{
          		required: true,
          		message: '请输入数量',
          		trigger: ['change','blur'],
          	}
          ],
          unit: [
            {
              required: true,
              message: '请选择单位',
              trigger: ['change','blur'],
            },
          ],
		  images1List: [
		    {
		      required: true,
		      message: '请选择图片',
		      trigger: ['change','blur'],
		      type: 'array'
		    }
		  ],
		  images2List: [
		    {
		      required: true,
		      message: '请选择图片',
		      trigger: ['change','blur'],
		      type: 'array'
		    }
		  ],
        }
      }
    },
	mounted() {
		this.$refs.form.setRules(this.rules)
		if(this.$refs.imageUpload1){
		  this.$refs.imageUpload1.action = config.BASE_URL+"/uploadImage"
		  this.$refs.imageUpload1.header = {
			  'Authorization': store.state.vuex_token
		  }
		}
		if(this.$refs.imageUpload2){
		  this.$refs.imageUpload2.action = config.BASE_URL+"/uploadImage"
		  this.$refs.imageUpload2.header = {
			  'Authorization': store.state.vuex_token
		  }
		}
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
	  uploadSuccess1(data, currentIndex, lists, index) {
	    console.log('文件上传成功', data, currentIndex, lists, index);
	  	this.model.images1 = data.path
	  },
	  uploadError1(err, currentIndex, lists, index) {
	    console.log('文件上传失败', err, currentIndex, lists, index);
	  		this.$refs.imageUpload1.clear()
	  		this.model.images1List=[]
	  },
	  uploadSuccess2(data, currentIndex, lists, index) {
	    console.log('文件上传成功', data, currentIndex, lists, index);
		const alias = currentIndex+2
		const key = "images"+ alias
	  	this.model[key] = data.path
	  },
	  uploadError2(err, currentIndex, lists, index) {
	    console.log('文件上传失败', err, currentIndex, lists, index);
	  		this.$refs.imageUpload1.clear()
	  		this.model.images2List=[]
	  },
      // 表单提交
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 验证通过
			addGoods(this.model).then(res=>{
				 this.$t.message.toast('提交成功')
				 uni.navigateTo({
					url: '/pages/index?index=3',
				 });
			}).catch(err=>{
				console.log(err)
				this.$t.message.toast(err.data.message)	 			 
			})
          } else {
            // 验证失败
			this.$t.message.toast('请填写表单')
          }
        })
      },
      // 点击地区选择器
      regionPickerConfirm(event) {
        this.model.address = event.province.label + '-' + event.city.label + '-' + event.area.label
      },
      // 点击商品单位选择器
      unitSelectConfirm(event) {
        this.model.unit = `${event[0]['label']}`
      },

      // 图片有修改
      imageUploadChange1(lists) {
        this.model.images1List = lists
      },
	  imageUploadChange2(lists) {
	    this.model.images2List = lists
	  }
    }
  }
</script>

<style lang="scss" scoped>
  
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    &-text {
      padding-left: 8rpx;
      color: $tn-font-sub-color;
    }
  }
  
</style>
